<template>

  <section class="cms-body" v-loading="loading">
    <!-- 返回组件 -->
    <cms-back></cms-back>
    <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">

      <el-form-item label="用户名" class="flex-50">
        <el-input v-model="dataInfo.userName" class="cms-width" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="新密码" class="flex-50" prop="password" v-if="isType('update')">
        <el-input v-model="dataInfo.password" class="cms-width"></el-input>
      </el-form-item>

      <el-form-item label="确认新密码" class="flex-50" prop="confirmPassword" v-if="isType('update')">
        <el-input v-model="dataInfo.confirmPassword" class="cms-width"></el-input>
      </el-form-item>

      <div class="form-footer">
        <el-button type="primary" v-if="isType('update')" @click="update()">修改</el-button>
        <el-button type="info" @click="$reset">重置</el-button>
      </div>

    </el-form>

  </section>

</template>

<script>
  import axios from "axios";
  import va from "@/rules";
  import formMixns from "@/mixins/form";

  export default {
    mixins: [formMixns], //普通表单变量
    data() {
      let self = this;
      let password = (rule, value, callback) => {
        if (value == "" || value == null) {
          callback(new Error('此项必填'));
        } else if (value.length < self.passwordMinLen) {
          callback(new Error('密码长度不能小于系统设定值：' + self.passwordMinLen));
        } else if (self.dataInfo.confirmPassword !== "") {
          self.$refs.form.validateField("confirmPassword");
        }
        callback();
      }

      let confirmPassword = (rule, value, callback) => {
        if (value == "" || value == null) {
          callback(new Error('此项必填'));
        }
        if (value !== self.dataInfo.password) {
          callback(new Error('前后密码不一致'));
        }
        callback();
      }

      let required = va.required('此项必填');

      return {
        passwordMinLen: '',
        rules: {
          //校验规则
          password: [required, {validator: password, trigger: ['change', 'blur']}],
          confirmPassword: [required, {validator: confirmPassword, trigger: 'blur'}]
        },
        dataInfo: {
          password: '',
          confirmPassword: ''
        }
      };
    },
    methods: {
      getDataInfo(id, type) {
        //重写获取表单数据
        let api = this.$api; //API地址
        axios.all([
          axios.post(api.userGet, {userId: id}),
        ]).then(
          axios.spread((data) => {
            console.log(data)
            this.dataInfo = data.body; //将用户数据复制给dataInfo
            this.$refs["form"].resetFields();
            this.passwordMinLen = data.body.passwordMinLen;//最小密码长度
            this.loading = false;
          })
        ).catch(err => {
          this.loading = false;
        });
      },
      selectDepartChange(val) {
        this.dataInfo.departId = val;
      },
      update() {
        this.updateDataInfo(this.$api.userUpdatePw, this.dataInfo, "pageList");
      }
    },
    created() {
      //初始获取数据
      this.getDataInfo(this.id, this.type);
    }
  };
</script>

<style>
</style>
